<template>
  <div class="legalService">
    <img class="banner" src="@assets/images/legal_banner.png" alt="" />
    <ul class="service-type">
      <li v-for="(item, index) in serviceTypeList" :key="index" @click="legalServiceType = item.id">
        <img class="checked-icon" v-show="legalServiceType === item.id" src="@assets/images/checked.png" alt="" />
        <img class="img" :src="item.img" alt="" />
        <p>{{ item.title }}</p>
      </li>
    </ul>
    <div class="form">
      <div class="title">
        <img src="@assets/images/legal_title_bg1.png" alt="" />
        <h3>免费预约，专家律师解答</h3>
        <img src="@assets/images/legal_title_bg2.png" alt="" />
      </div>
      <div class="service-time">
        <span class="desc">累计服务</span>
        <ul class="times-list">
          <li class="van-hairline--surround">8</li>
          <li class="van-hairline--surround">7</li>
          <li class="van-hairline--surround">6</li>
          <li class="van-hairline--surround">5</li>
          <li class="van-hairline--surround">6</li>
        </ul>
      </div>
      <ul class="form-list">
        <li class="form-option">
          <img src="@assets/images/icon_user.png" alt="" />
          <van-field v-model.trim="nickname" maxlength="10" clearable placeholder="请输入您的姓名" />
        </li>
        <li class="form-option">
          <img src="@assets/images/icon_company.png" alt="" />
          <van-field v-model.trim="company" maxlength="20" clearable placeholder="请输入公司名" />
        </li>
        <li class="form-option">
          <img src="@assets/images/icon_phone.png" alt="" />
          <van-field v-model.trim="phone" type="tel" maxlength="11" clearable placeholder="请输入您的手机号码" />
        </li>
        <li class="form-option">
          <img src="@assets/images/yzm.png" alt="" />
          <van-field v-model.trim="smsCode" maxlength="6" type="number" placeholder="请输入验证码">
            <template #button>
              <SmsBtn class="sms-btn van-hairline--left" color="#FE9100" plain size="small" :border="false" :phone="phone" />
            </template>
          </van-field>
        </li>
      </ul>
      <van-button class="submit-btn" type="info" block @click="submit" color="#FE9100" round>提 交</van-button>
    </div>
  </div>
</template>

<script>
import { Field, Button, Toast, Dialog } from 'vant';
import { order_saveShareOrder, product_getProductDetailNew } from '@api/service';
import SmsBtn from '@components/smsBtn';
export default {
  components: {
    [Button.name]: Button,
    [Field.name]: Field,
    SmsBtn
  },
  data() {
    return {
      product: {},
      shareId: this.$route.query.shareId,
      legalServiceType: 1,
      serviceTypeList: [
        {
          id: 1,
          title: '工程建设',
          img: require('@assets/images/legal_type1.png')
        },
        {
          id: 2,
          title: '合同劳动',
          img: require('@assets/images/legal_type2.png')
        },
        {
          id: 3,
          title: '交通事故',
          img: require('@assets/images/legal_type3.png')
        },
        {
          id: 4,
          title: '婚姻纠纷',
          img: require('@assets/images/legal_type4.png')
        }
      ],
      nickname: '',
      phone: '',
      company: '',
      smsCode: ''
    };
  },
  mounted() {
    this.getProductDetail();
    this.phone = this.userInfo.phone;
    this.nickname = this.userInfo.nickname;
    this.company = this.userInfo.company;
  },
  methods: {
    async getProductDetail() {
      let res = await product_getProductDetailNew({ id: this.$route.query.id });
      if (res.code === 200) {
        let obj = {};
        res.data.attrList.forEach(todo => {
          obj[todo.key] = todo.value;
        });
        this.product = {
          ...res.data,
          ...obj
        };
      } else {
        Toast(res.message);
      }
    },
    async submit() {
      const { legalServiceType, smsCode, phone, company, nickname, shareId } = this;
      if (!nickname) {
        return Toast('请输入申请人姓名');
      } else if (!company) {
        return Toast('请输入公司名');
      } else if (!phone) {
        return Toast('请输入您的手机号');
      } else if (!/^1[3456789]\d{9}$/.test(phone)) {
        return Toast('请输入正确的手机号');
      } else if (!smsCode) {
        return Toast('请输入验证码');
      }
      let res = await order_saveShareOrder({
        json: 1,
        productId: this.$route.query.id,
        phone,
        company,
        nickname,
        smsCode,
        shareId,
        detailList: [
          { itemKey: 'legalServiceType', itemValue: legalServiceType, itemName: '法律服务类型' },
          { itemKey: 'nickname', itemValue: nickname, itemName: '法律服务申请人姓名' },
          { itemKey: 'phone', itemValue: phone, itemName: '法律服务申请人手机号' }
        ]
      });
      if (res.code === 200) {
        Dialog.alert({
          title: '温馨提示',
          message: `信息提交成功， 我们的专属顾问会尽快和您取得联系。`,
          showConfirmButton: false,
          beforeClose: (action, done) => {
            done(false);
          }
        });
      } else {
        Toast(res.msg);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.legalService {
  display: flex;
  flex-direction: column;
}

.banner {
  width: 100%;
  height: 300px;
}
.service-type {
  background: #fff;
  display: flex;
  justify-content: space-around;
  padding: 54px 0 70px;
  font-size: 28px;
  color: #2a303e;
  li {
    position: relative;
  }
  .img {
    width: 90px;
    height: 90px;
    margin-bottom: 25px;
  }
  .checked-icon {
    position: absolute;
    width: 36px;
    height: 36px;
    top: 52px;
    right: 8px;
  }
}
.form {
  flex: 1;
  padding: 70px 60px 0;
  background: #fff;
  margin-top: 20px;
  .title {
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 123px;
    }
    h3 {
      font-size: 32px;
      color: #282e3c;
      margin: 0 5px;
    }
  }
  .service-time {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 28px 0 58px;
    font-size: 24px;
    .desc {
      color: #282e3c;
      margin-right: 16px;
    }
    .times-list {
      display: flex;
      li {
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ff3000;
        margin-right: 8px;
        &:after {
          border-color: #ff3000;
          border-radius: 4px;
        }
      }
    }
  }
}
.form-option {
  height: 80px;
  display: flex;
  align-items: center;
  padding: 0 20px 0 40px;
  margin-bottom: 25px;
  font-size: 24px;
  background: #f8f9f9;
  border-radius: 40px;
  /deep/ input {
    background: #f8f9f9;
  }
  &:after {
    border-radius: 36px;
  }
  img {
    width: 22px;
    margin-right: 20px;
  }
  .van-cell {
    flex: 1;
    padding: 0;
    background: #f8f9f9;
    box-sizing: border-box;
  }
}
.sms-btn {
  background: transparent;
  margin-right: -12px;
}
.submit-btn {
  margin: 50px 0;
  font-size: 32px;
  font-weight: bold;
}
</style>
